import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { ProgramWrap } from "./style";
import Navigation from "@/components/navigation";
import ProgramLeft from "./programLeft";
import ProgramRight from "./programRight";
import { programDetailAction } from "./store/actionTypes";

export default memo(function Program(props) {
  const id = props.location.search.split("=")[1];
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(programDetailAction(id));
  }, [dispatch, id]);
  const { programDetailInfo } = useSelector(
    (state) => ({
      programDetailInfo: state.getIn(["program", "programDetailInfo"]),
    }),
    shallowEqual
  );
  const djId = programDetailInfo.program
    ? programDetailInfo.program.radio.id
    : "";

  return (
    <ProgramWrap>
      <Navigation />
      <div className="s1 wrap-v2">
        <ProgramLeft id={id} progrom={programDetailInfo} />
        <ProgramRight id={djId} lid={id} />
      </div>
    </ProgramWrap>
  );
});
